<template>
	<view class="padding-lr-com padding-top-xl">
		<view class="flex-row margin-bottom-xs">
			<image src="../../static/icons/zhifeiji.png" style="width: 30px;height:30px"></image>
			<text class="text-color margin-left-com">问题与建议</text>
		</view>
		<textarea v-model="suggestionMsg.describe" placeholder="请填写你的意见与建议,感谢您的支持(必填)" :maxlength="1000"
			placeholder-style="font-size:14px" class="padding-com"
			style="background-color: #efefef;border-radius: 20rpx;width: 100%;height:180px ;position: relative;">
			<div class="text-low" style="position:absolute;bottom:30rpx;right:30rpx">
				<span style="font-size: 18px;">{{suggestionMsg.describe.length}}</span>
				<span style="font-size: 14px;">/</span>
				<span style="font-size: 14px;">1000</span>
			</div>
		</textarea>
		<view style="height: 120rpx;"></view>
		<view style="width: 100%;">
			<uv-upload :fileList="fileList" multiple height="150" width="380" :auto-upload="false"
				@afterRead="afterRead" @delete="deletePic" :custom-style="{textAlign:'center'}">
				<view class="padding-tb-com  flex-column-bc"
					style="border: 1px dashed #ee3f4d;borderRadius: 20rpx;padding-left: 300rpx;padding-right: 300rpx;">
					<image src="../../static/icons/camera.png" style="width: 80rpx;height:80rpx;" mode="aspectFill">
					</image>
					<view class="text-color text-sm">上传图片</view>
				</view>
			</uv-upload>
		</view>


		<view class="text-low text-df margin-top-xl">草稿将自动保存</view>
		<view style="text-align: center;">
			<button class="theme-bg-color  margin-top-lg" type="warn" size="mini"
				:disabled="suggestionMsg.describe.length==0 && suggestionMsg.pictures.length==0"
				style="color:#fff;width:75%;height:70rpx;align-items: center;border-radius: 30px;text-align: center;line-height: 70rpx;"
				@click="submit()">提交</button>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import store from "../../store/login";
	import {
		submitFeedback
	} from '@/api/myhome/feedback.js'
	const customStyle = ref({
		border: '1px dashed #ee3f4d',
		textAlign: 'center',
		borderRadius: '20rpx',
		margin: '0 auto',
		verticalAlign: 'middle',
		paddingLeft: '40%'
		// position: 'relative'
	})
	// 提交建议接口数据
	const suggestionMsg = ref({
		describe: '',
		pictures: []
	})
	const fileList = ref([])
	// 删除图片
	const deletePic = (event) => {
		fileList.value.splice(event.index, 1)
		suggestionMsg.value.pictures.splice(event.index, 1)
		console.log(suggestionMsg.value)
	}
	// 新增图片
	const afterRead = async (event) => {
		console.log(event)
		// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file)
		let fileListLen = fileList.value.length
		lists.map((item) => {
			fileList.value.push({
				...item,
				status: 'uploading',
				message: '上传中'
			})
		})
		for (let i = 0; i < lists.length; i++) {
			console.log('lists[i].url' + lists[i].url)
			const result = await uploadFilePromise(lists[i].url)
			console.log('result' + result)
			let item = fileList.value[fileListLen]
			fileList.value.splice(fileListLen, 1, Object.assign(item, {
				status: 'success',
				message: '',
				url: result
			}))
			fileListLen++
		}
	}
	const uploadFilePromise = (url) => {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: 'https://api.anred.qrsk.net/applet/problem/feedback/image',
				filePath: url,
				name: 'file',
				header: {
					'Content-Type': 'multipart/form-data',
					"Authorization": store.state.token,
					'siteId': "100",
				},
				success: (res) => {
					let reslut = JSON.parse(res.data)
					suggestionMsg.value.pictures.push(reslut.data)
					setTimeout(() => {
						resolve(res.data.data)
					}, 1000)
				}
			});
		})
	}
	// 提交
	const submit = () => {
		submitFeedback(JSON.stringify(suggestionMsg.value)).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: '提交成功,感谢您的反馈！',
					icon: 'none',
					duration: 2000
				})
				suggestionMsg.value = {
					describe: '',
					pictures: []
				}
				fileList.value = []
				setTimeout(() => {
					uni.navigateBack(-1)
				}, 1500)
			}
		})
	}
</script>

<style lang="scss" scoped>
	body {
		background-color: #fff;
	}
</style>